• ;
  • A Coding Boy
  • Blog
  • Videos
  • Projects
  • Home
HTML AND CSS
LOGIN PAGE
WEBSITE DESGIN
API PROJECTS
CARD DESGIN
JAVASCRIPTS GAMES
JAVASCRIPT PROJECTS
JAVA PROJECTS
PYTHON PROJECTS
demo post
only for demo nasa prospect
only for demo the gonnies
most popular
how to create parallax website
how to create a beautiful card
how to create a netflix login page
how to create flipping ui card
how to create image generator website
QR Code Scanner or Reader in HTML CSS & JavaScript
As you may know, a QR code scanner is a scanning device that is able to read QR codes. Most the phone has a built-in QR code scanner app. In this blog, I’m not going to create a QR code scanner by the camera instead of this, in my QR code reader app, users can upload any QR code image and decode or extract the content from it, as you’ve seen in the image preview.
QR Code Reader in JavaScript [Source Codes]
To create QR Code Reader using HTML, CSS, and JavaScript, follow the given steps line by line:
1. Create a folder. You can name this folder whatever you want and put the files listed below inside it.
2. Create an index.html file. The file name must be index and its extension .html
3. Create a style.css file. The file name must be style and its extension .css
4. Create a script.js file. The file name must be script and its extension .js
First, paste the following codes into your index.html file.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>QR Code Scanner or Reader | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Font Awesome CDN Link for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
<div class="wrapper">
<form action="#">
<input type="file" hidden>
<img src="#" alt="qr-code">
<div class="content">
<i class="fas fa-cloud-upload"></i>
<p>Upload QR Code to Read</p>
</div>
</form>
<div class="details">
<textarea spellcheck="false" disabled></textarea>
<div class="buttons">
<button class="close">Close</button>
<button class="copy">Copy Text</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
<!DOCTYPE html> <!-- Coding By CodingNepal - youtube.com/codingnepal --> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>QR Code Scanner or Reader | CodingNepal</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Font Awesome CDN Link for Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"> </head> <body> <div class="wrapper"> <form action="#"> <input type="file" hidden> <img src="#" alt="qr-code"> <div class="content"> <i class="fas fa-cloud-upload"></i> <p>Upload QR Code to Read</p> </div> </form> <div class="details"> <textarea spellcheck="false" disabled></textarea> <div class="buttons"> <button class="close">Close</button> <button class="copy">Copy Text</button> </div> </div> </div> <script src="script.js"></script> </body> </html>
Second, paste the following codes into your style.css file
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 0 10px;
background: #E3F2FD;
}
.wrapper{
height: 270px;
width: 420px;
border-radius: 7px;
background: #0B85FF;
padding: 30px 30px 35px;
transition: height 0.2s ease;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.wrapper.active{
height: 525px;
}
.wrapper form{
height: 210px;
display: flex;
cursor: pointer;
user-select: none;
text-align: center;
border-radius: 7px;
background: #fff;
align-items: center;
justify-content: center;
transition: height 0.2s ease;
}
.wrapper.active form{
height: 225px;
pointer-events: none;
}
form img{
display: none;
max-width: 148px;
}
.wrapper.active form img{
display: block;
}
.wrapper.active form .content{
display: none;
}
form .content i{
color: #0B85FF;
font-size: 55px;
}
form .content p{
color: #0B85FF;
margin-top: 15px;
font-size: 16px;
}
.wrapper .details{
opacity: 0;
margin-top: 25px;
pointer-events: none;
}
.wrapper.active .details{
opacity: 1;
pointer-events: auto;
transition: opacity 0.5s 0.05s ease;
}
.details textarea{
width: 100%;
height: 128px;
outline: none;
resize: none;
color: #fff;
font-size: 18px;
background: none;
border-radius: 5px;
padding: 10px 15px;
border: 1px solid #fff;
}
textarea::-webkit-scrollbar{
width: 0px;
}
textarea:hover::-webkit-scrollbar{
width: 5px;
}
textarea:hover::-webkit-scrollbar-track{
background: none;
}
textarea:hover::-webkit-scrollbar-thumb{
background: #fff;
border-radius: 8px;
}
.details .buttons{
display: flex;
margin-top: 20px;
align-items: center;
justify-content: space-between;
}
.buttons button{
height: 55px;
outline: none;
border: none;
font-weight: 500;
font-size: 16px;
cursor: pointer;
color: #0B85FF;
border-radius: 5px;
background: #fff;
transition: transform 0.3s ease;
width: calc(100% / 2 - 10px);
}
.buttons button:active{
transform: scale(0.95);
}
@media (max-width: 450px) {
.wrapper{
padding: 25px;
height: 260px;
}
.wrapper.active{
height: 520px;
}
}
/* Import Google Font - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 0 10px; background: #E3F2FD; } .wrapper{ height: 270px; width: 420px; border-radius: 7px; background: #0B85FF; padding: 30px 30px 35px; transition: height 0.2s ease; box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .wrapper.active{ height: 525px; } .wrapper form{ height: 210px; display: flex; cursor: pointer; user-select: none; text-align: center; border-radius: 7px; background: #fff; align-items: center; justify-content: center; transition: height 0.2s ease; } .wrapper.active form{ height: 225px; pointer-events: none; } form img{ display: none; max-width: 148px; } .wrapper.active form img{ display: block; } .wrapper.active form .content{ display: none; } form .content i{ color: #0B85FF; font-size: 55px; } form .content p{ color: #0B85FF; margin-top: 15px; font-size: 16px; } .wrapper .details{ opacity: 0; margin-top: 25px; pointer-events: none; } .wrapper.active .details{ opacity: 1; pointer-events: auto; transition: opacity 0.5s 0.05s ease; } .details textarea{ width: 100%; height: 128px; outline: none; resize: none; color: #fff; font-size: 18px; background: none; border-radius: 5px; padding: 10px 15px; border: 1px solid #fff; } textarea::-webkit-scrollbar{ width: 0px; } textarea:hover::-webkit-scrollbar{ width: 5px; } textarea:hover::-webkit-scrollbar-track{ background: none; } textarea:hover::-webkit-scrollbar-thumb{ background: #fff; border-radius: 8px; } .details .buttons{ display: flex; margin-top: 20px; align-items: center; justify-content: space-between; } .buttons button{ height: 55px; outline: none; border: none; font-weight: 500; font-size: 16px; cursor: pointer; color: #0B85FF; border-radius: 5px; background: #fff; transition: transform 0.3s ease; width: calc(100% / 2 - 10px); } .buttons button:active{ transform: scale(0.95); } @media (max-width: 450px) { .wrapper{ padding: 25px; height: 260px; } .wrapper.active{ height: 520px; } }
Last, paste the following codes into your script.js file.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
const wrapper = document.querySelector(".wrapper"),
form = document.querySelector("form"),
fileInp = form.querySelector("input"),
infoText = form.querySelector("p"),
closeBtn = document.querySelector(".close"),
copyBtn = document.querySelector(".copy");
function fetchRequest(file, formData) {
infoText.innerText = "Scanning QR Code...";
fetch("http://api.qrserver.com/v1/read-qr-code/", {
method: 'POST', body: formData
}).then(res => res.json()).then(result => {
result = result[0].symbol[0].data;
infoText.innerText = result ? "Upload QR Code to Scan" : "Couldn't scan QR Code";
if(!result) return;
document.querySelector("textarea").innerText = result;
form.querySelector("img").src = URL.createObjectURL(file);
wrapper.classList.add("active");
}).catch(() => {
infoText.innerText = "Couldn't scan QR Code";
});
}
fileInp.addEventListener("change", async e => {
let file = e.target.files[0];
if(!file) return;
let formData = new FormData();
formData.append('file', file);
fetchRequest(file, formData);
});
copyBtn.addEventListener("click", () => {
let text = document.querySelector("textarea").textContent;
navigator.clipboard.writeText(text);
});
form.addEventListener("click", () => fileInp.click());
closeBtn.addEventListener("click", () => wrapper.classList.remove("active"));
const wrapper = document.querySelector(".wrapper"), form = document.querySelector("form"), fileInp = form.querySelector("input"), infoText = form.querySelector("p"), closeBtn = document.querySelector(".close"), copyBtn = document.querySelector(".copy"); function fetchRequest(file, formData) { infoText.innerText = "Scanning QR Code..."; fetch("http://api.qrserver.com/v1/read-qr-code/", { method: 'POST', body: formData }).then(res => res.json()).then(result => { result = result[0].symbol[0].data; infoText.innerText = result ? "Upload QR Code to Scan" : "Couldn't scan QR Code"; if(!result) return; document.querySelector("textarea").innerText = result; form.querySelector("img").src = URL.createObjectURL(file); wrapper.classList.add("active"); }).catch(() => { infoText.innerText = "Couldn't scan QR Code"; }); } fileInp.addEventListener("change", async e => { let file = e.target.files[0]; if(!file) return; let formData = new FormData(); formData.append('file', file); fetchRequest(file, formData); }); copyBtn.addEventListener("click", () => { let text = document.querySelector("textarea").textContent; navigator.clipboard.writeText(text); }); form.addEventListener("click", () => fileInp.click()); closeBtn.addEventListener("click", () => wrapper.classList.remove("active"));
That’s all, now you’ve successfully created a QR Code Scanner or Reader in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
live demo
Download files
Info
Home
Projects
Blogs
Videos
About us
Follow us for more!
© 2023 All Rights Reserved A Coding Boy
© 2023 All Rights Reserved A Coding Boy

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glassmorphism Login Form | CodingNepal</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <form action="#"> <h2>Login</h2> <div class="input-field"> <input type="text" required> <label>Enter your email</label> </div> <div class="input-field"> <input type="password" required> <label>Enter your password</label> </div> <div class="forget"> <label for="remember"> <input type="checkbox" id="remember"> <p>Remember me</p> </label> <a href="#">Forgot password?</a> </div> <button type="submit">Log In</button> <div class="register"> <p>Don't have an account? <a href="#">Register</a></p> </div> </form> </div> </body> </html>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; padding: 0 10px; } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000; background-position: center; background-size: cover; } .wrapper { width: 400px; border-radius: 8px; padding: 30px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } form { display: flex; flex-direction: column; } h2 { font-size: 2rem; margin-bottom: 20px; color: #fff; } .input-field { position: relative; border-bottom: 2px solid #ccc; margin: 15px 0; } .input-field label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: #fff; font-size: 16px; pointer-events: none; transition: 0.15s ease; } .input-field input { width: 100%; height: 40px; background: transparent; border: none; outline: none; font-size: 16px; color: #fff; } .input-field input:focus~label, .input-field input:valid~label { font-size: 0.8rem; top: 10px; transform: translateY(-120%); } .forget { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 35px 0; color: #fff; } #remember { accent-color: #fff; } .forget label { display: flex; align-items: center; } .forget label p { margin-left: 8px; } .wrapper a { color: #efefef; text-decoration: none; } .wrapper a:hover { text-decoration: underline; } button { background: #fff; color: #000; font-weight: 600; border: none; padding: 12px 20px; cursor: pointer; border-radius: 3px; font-size: 16px; border: 2px solid transparent; transition: 0.3s ease; } button:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.15); } .register { text-align: center; margin-top: 30px; color: #fff;}